<template>
  <transition name="fade">
    <div class="ins-modal" v-show="dialogVisible">
      <template v-if="!(lazyLoad && !hasLoad)">
        <div class="wrapper">
          <transition name="slide-fade">
            <div
              v-show="dialogVisible"
              class="dialog"
              :style="{
                width: dialogWidth
              }"
            >
              <div class="header">
                <div class="hd-left" style="position: absolute">
                  <slot
                    name="hdleftCon"
                    v-if="!dialogTitle || hasHdleftCon"
                  ></slot>
                </div>
                <div style="width: 20px"></div>
                <div class="hd-center">{{ dialogTitle || title }}</div>
                <div class="hd-right">
                  <img :src="delIcon" @click="dialogVisible = false" />
                </div>
              </div>
              <transition name="fade">
                <div
                  class="body"
                  :class="{
                    maxHeight: 'maxHeight',
                    'has-steps-form': hasFormStepsGroup
                  }"
                  v-if="!needRefresh || (needRefresh && dialogVisible)"
                >
                  <slot>默认插槽</slot>
                </div>
              </transition>

              <div
                slot="footer"
                class="footer"
                v-if="!noFooter && !customFooter"
              >
                <template v-if="btnCfg">
                  <el-button
                    style="min-width: 18%"
                    v-for="btn in btnCfg"
                    :key="btn.name"
                    :type="btn.type"
                    @click="$emit(btn.event, btn.params)"
                  >
                    {{ btn.name }}
                  </el-button>
                </template>
                <template v-else>
                  <template v-if="type === 'detail' || type === 'null'">
                    <base-btn
                      :btnData="btnClose"
                      @click.native="handleClose"
                    ></base-btn>
                  </template>
                  <template v-else>
                    <base-btn
                      :btnData="btnCancel"
                      @click.native="handleCancel"
                    ></base-btn>
                    <base-btn
                      :btnData="btnOk"
                      @click.native="handleConfirm"
                    ></base-btn>
                  </template>
                </template>
              </div>
              <div class="footer" v-if="customFooter">
                <slot name="footerCon"></slot>
              </div>
            </div>
          </transition>
        </div>
      </template>
    </div>
  </transition>
</template>

<script>
import BaseBtn from '@/components/BaseBtn/index';

export default {
  name: 'TableRowDetailDialog',
  components: {
    BaseBtn
  },
  props: {
    hasFormStepsGroup: {
      type: Boolean,
      default: false
    },
    dialogTitle: {
      type: String,
      default: ''
    },
    dialogWidth: {
      type: String,
      default: '40%'
    },
    draggable: {
      type: Boolean,
      default: false
    },
    closeOnClickModal: {
      type: Boolean,
      default: false
    },
    customFooter: {
      type: Boolean,
      default: false
    },
    noFooter: {
      type: Boolean,
      default: false
    },
    destroyOnClose: {
      type: Boolean,
      default: false
    },
    lazyLoad: {
      type: Boolean,
      default: false
    },
    maxHeight: {
      type: Boolean,
      default: false
    },
    needRefresh: {
      type: Boolean,
      default: false
    },
    hasHdleftCon: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      hasLoad: false,
      type: 'detail',
      dialogVisible: false,
      btnCfg: null,
      delIcon: require('@/assets/widget/del-icon.png'),
      btnOk: {
        name: '确定',
        type: 'ok'
      },
      btnCancel: {
        name: '取消',
        type: 'cancel',
        bgColor: '#2B2B2C'
      },
      btnClose: {
        name: '关闭',
        type: 'cancel',
        bgColor: '#2B2B2C'
      }
    };
  },
  computed: {
    title() {
      if (this.dialogTitle) {
        return this.dialogTitle;
      } else {
        switch (this.type) {
          case 'detail':
            return '详情';
          case 'add':
            return '新增';
          case 'edit':
            return '编辑';
          case 'null':
            return '';
        }
      }
    }
  },
  created() {},
  watch: {
    // 监听div关闭
    dialogVisible: {
      handler(newVal) {
        if (newVal === false) {
          this.$emit('close');
        }
      }
    }
  },
  methods: {
    show(action = 'detail', btnCfg) {
      this.hasLoad = true;
      this.type = action;
      this.btnCfg = btnCfg;
      this.dialogVisible = true;
      this.$nextTick(() => {
        // 弹框打开完成后触发opened事件
        this.$emit('opened');
      });
    },
    handleClose() {
      this.$emit('close');
      this.hide();
    },
    handleConfirm() {
      // console.log('-------------');
      this.$emit('confirm');
    },
    handleCancel() {
      this.$emit('cancel');
      this.hide();
    },
    hide() {
      this.dialogVisible = false;
      this.$emit('hide');
    }
  }
};
</script>

<style lang="scss" scoped>
.ins-modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.ins-modal > div {
}

.wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
  z-index: 2023;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .dialog {
    position: relative;
    flex-direction: column;
    display: flex;
    justify-content: center;
    // max-height: 80vh;
    margin-bottom: 0px;
    margin-top: 0px;
    // width: 40%;
    background: rgba(255, 255, 255);
    border-radius: 10px;
    border: 1px solid #e7e9ee;

    .header {
      height: 58px;
      display: flex;
      line-height: 58px;
      padding: 0 16px;
      justify-content: space-between;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);

      .hd-center {
        font-size: 18px;
      }

      .hd-right img {
        cursor: pointer;
      }
    }

    .body {
      padding: 15px 25px;
    }

    .footer {
      height: 58px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
    }
  }
}

.maxHeight {
  max-height: 80vh;
  overflow: auto;

  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 8px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
  }

  &::-webkit-scrollbar-track-piece {
    background: rgba(200, 200, 200, 0.1);
  }

  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 8px;
    background: rgba(200, 200, 200, 0.5);
  }
}

.wrapper .dialog .body.has-steps-form {
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
}
/* 自定义关闭动画 */
// .dialog-show {
//   animation-name: custom-dialog-leave-animation;
//   animation-duration: 0.5s;
//   animation-timing-function: ease;
//   animation-fill-mode: forwards;
// }
// .ins-modal-show {
//   /* 自定义打开动画 */
//   animation-name: custom-dialog-leave-animation;
//   animation-duration: 0.5s;
//   animation-timing-function: ease;
//   animation-fill-mode: forwards;
// }

// /* 自定义动画 */
// @keyframes custom-dialog-enter-animation {
//   from {
//     opacity: 0;
//     transform: translateX(-100px);
//   }
//   to {
//     opacity: 1;
//     transform: translateX(0);
//   }
// }

// @keyframes custom-dialog-leave-animation {
//   from {
//     opacity: 1;
//     transform: translateX(0);
//   }
//   to {
//     opacity: 0;
//     transform: translateX(-100px);
//   }
// }

.slide-fade-enter-active {
  transition: all 0.5s ease;
}
.slide-fade-leave-active {
  transition: all 0.5s ease;
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(200px);
  opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ease;
}
// .fade-leave-active {
//   transition: all .5s cubic-bezier(0.95, -0.1, 1, 0.13);
// }
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
